import { getDetails } from '@/api/details'
import { cartAdd } from '@/api/cart'
import { nextTick, onMounted, reactive, ref, type Ref } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRoute, useRouter, type RouteLocationNormalizedLoaded } from 'vue-router'
import { ImagePreview, Notify, Toast } from 'vant'
// const router = useRouter()
let route: RouteLocationNormalizedLoaded | null = null

export function useHeader(router = useRouter()) {
  // 右侧...
  const showPopover = ref(false)
  const actions = [
    { text: '首页', icon: 'wap-home-o', name: 'home' },
    { text: '购物车', icon: 'shopping-cart-o', name: 'cart' },
    { text: '分享', icon: 'share-o', name: 'share' },
  ]
  const onSelect = (item: any) => {
    showPopover.value = false
    if (item.name === 'share') {
      showShare.value = true
    } else {
      router.push({ name: item.name })
    }
  }
  const handleRouterBack = () => {
    router.go(-1)
  }

  // share
  const showShare = ref(false)
  const shareOptions = [
    { name: '微信', icon: 'wechat' },
    { name: '微博', icon: 'weibo' },
    { name: '复制链接', icon: 'link' },
    { name: '分享海报', icon: 'poster' },
    { name: '二维码', icon: 'qrcode' },
  ]
  const onShareSelect = (option: any) => {
    Toast(option.name)
    showShare.value = false
  }

  return {
    showPopover,
    actions,
    onSelect,
    handleRouterBack,
    showShare,
    shareOptions,
    onShareSelect
  }
}

export function useDetails(video: Ref<any>, swipe: Ref<any>) {

  // details
  const detailBanners = ref([])
  const handleSwipeItemClick = (index: number) => {
    ImagePreview({
      images: detailBanners.value,
      startPosition: index,
      // 预览图片改变的时候，swipe组件展示的内容对应改变
      onChange: (previewIndex) => {
        swipe.value.swipeTo(previewIndex)
      },
      closeable: true,
    })
  }
  const handleVideoPlay = () => {
    showVideo.value = true
    nextTick(() => {
      video.value.play()
    })
  }
  const videoTime = '00′55″'
  const showVideo = ref(false)
  const handlePopupClose = () => {
    video.value.currentTime = 0
    video.value.pause()
  }
  const price = ref(0)
  const proname = ref('')

  onMounted(() => {
    console.log('mounted')
    route = useRoute()
    getDetails(route.params.id as string)
      .then((res) => {
        detailBanners.value = res.data.banners[0].split(',')
        proname.value = res.data.proname
        price.value = res.data.originprice
      })
      .catch((err) => console.error(err))
    // 请求购物车数量数据
    // getCartListData(userStore.userid)
  })

  return {
    detailBanners,
    handleSwipeItemClick,
    handleVideoPlay,
    videoTime,
    showVideo,
    handlePopupClose,
    price,
    proname
  }
}

export function useFooter(router = useRouter()) {
  const flag = ref(true)
  const handleAddCart = () => {
    // 先校验登录状态
    const token = localStorage.getItem('token')
    if (!token) {
      router.push({
        path: '/login',
      })
    } else {
      const userStore = useUserStore()
      cartAdd({
        userid: userStore.userid,
        proid: route?.params.id as string,
        num: 1,
      }).then((res: any) => {
        if (res.code === '200') {
          // getCartListData(userStore.userid)
          Notify({ type: 'danger', message: '加入成功' })
        }
        console.log('cartadd', res)
      })
    }
  }
  return {
    flag,
    handleAddCart
  }
}